<template>
    <div style="text-align:initial ;" class="box">
        <!-- <span style="color: cadetblue; margin-right: 1000px;" @click="back">返回</span> -->
        <el-button type="success"  size="mini" style="margin-right: 1000px;margin-bottom: 10px;" @click="back">返回</el-button>
        <el-divider><i class="el-icon-search"></i><span style="color: #67C23A;"> 搜索结果</span>
            <b style="margin-left: 5px;color: #409EFF;">{{searchCount}} 条</b>
        </el-divider>
        <el-empty description="暂无数据" v-if="searchResultList.length==0"></el-empty>
        <div v-for="(item, index) in searchResultList">
            <!-- 车票 -->
            <el-row class="item" style="width: 100%;height: 200px;display: flex;align-items: center;"
                v-if="item.searchVO.typeId == 0">
                <div class="left">
                    <div style="display: flex;">
                        <h3 style="font-size: 23px; font-weight: bold; color:#67C23A;margin-right: 20px;">
                            {{ item.searchVO.title }}
                        </h3>
                        <el-tag size="mini" style="text-align: center; width: 40px;font-size: 10px;margin-top: 5px;"
                            v-if="item.searchVO.carType == 0">高铁</el-tag>
                        <el-tag size="mini" style="text-align: center; width: 40px;font-size: 10px;margin-top: 5px;"
                            v-if="item.searchVO.carType == 1">火车</el-tag>
                    </div>
                    <div class="content">
                        <div>
                            <span>发车日期：</span><span style="color: #409EFF;">{{ item.searchVO.startDate | formatDate
                                }}</span>
                        </div>
                        <div>
                            <span style="font-size: 22px;">{{ item.searchVO.startTime }}</span>
                            <span
                                style="font-size: 12px;margin: 0 88px;border-bottom: 1px solid #000;padding-bottom: 3px;">{{
                                    item.searchVO.needTime }} <i class="el-icon-time"></i></span>
                            <span style="font-size: 22px;">{{ item.searchVO.endTime }}</span>
                        </div>
                        <div>
                            <span>{{ item.searchVO.startSite }}</span>
                            <span style="font-size: 12px;margin: 0 80px 0 78px;">{{ item.searchVO.carNumber }} <i
                                    class="el-icon-truck"></i></span>
                            <span>{{ item.searchVO.endSite }}</span>
                        </div>
                        <div>
                            <span>价格：</span><b style="color: red;">{{ item.searchVO.price }} ￥</b>
                        </div>
                    </div>

                </div>
                <div>
                    <el-button size="medium" type="success" @click="carDetail(item.searchVO.id)">查看详情</el-button>
                </div>
            </el-row>
            <!-- 路线 -->
            <el-row class="item" style="width: 100%;height: 200px;display: flex;align-items: center;"
                v-if="item.searchVO.typeId == 1">
                <div class="img" style="width: 15%;">
                    <el-image :src="item.searchVO.imgUrl" style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="content2" style="width: 43%;height: 100%;">
                    <div style="display: flex;">
                        <h3>{{ item.searchVO.title }}</h3>
                        <el-tag size="mini" type="warning"
                            style="text-align: center; width: 40px;font-size: 10px;font-family: Arial">路线</el-tag>
                    </div>
                    <div>
                        <span>时间：</span><span style="color: #409EFF;">{{ item.searchVO.startDateTime |
                            formatDateTime }}</span>
                        <i class="el-icon-minus"></i>
                        <span style="color: #409EFF;">{{ item.searchVO.endDateTime | formatDateTime }}</span>
                    </div>
                    <div>
                        <span>开始地：</span><b style="margin-right: 30px;">{{ item.searchVO.startSite }}</b>
                        <span>结束地：</span><b>{{ item.searchVO.endSite }}</b>
                    </div>
                    <div>
                        <span>旅行天数：</span><b style="margin-right: 30px;">{{ item.searchVO.day }}</b>
                        <span>价格：</span><b style="color: red;">{{ item.searchVO.price }} ￥</b>
                    </div>
                    <div class="text-ellipsis">
                        <span>简介：</span>{{ item.searchVO.content }}
                    </div>
                </div>
                <div>
                    <el-button size="medium" type="success" @click="routeDetail(item.searchVO.id)">查看详情</el-button>
                </div>
            </el-row>
            <!-- 住宿 -->
            <el-row class="item" style="width: 100%;height: 200px;display: flex;align-items: center;"
                v-if="item.searchVO.typeId == 2">
                <div class="img" style="width: 15%;">
                    <el-image :src="item.searchVO.imgUrl" style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="content2" style="width: 43%;height: 100%;">
                    <div style="display: flex;">
                        <h3>{{ item.searchVO.title }}</h3>
                        <el-tag size="mini" type="warning"
                            style="text-align: center; width: 40px;font-size: 10px;font-family: Arial">住宿</el-tag>
                    </div>
                    <div class="start">
                        <span>星级：</span>
                        <span style="margin-right: 30px;">
                            <el-rate v-model="item.searchVO.hotelStar" style="display: inline-block;" disabled
                                show-score text-color="#ff9900" score-template="{value}">
                            </el-rate>
                        </span>
                        <span>价格：</span><b style="color: red;">{{ item.searchVO.price }} ￥</b>
                    </div>
                    <div class="address">
                        <span>地址：</span><b>{{ item.searchVO.address }}</b>
                    </div>
                    <div class="intro">
                        <span>简介：</span><span class="text-ellipsis">{{ item.searchVO.content }}</span>
                    </div>
                </div>
                <div>
                    <el-button size="medium" type="success"
                        @click="hotelDetail(item.searchVO.id, item.searchVO.scenicSpotId)">查看详情</el-button>
                </div>
            </el-row>
            <!-- 景区 -->
            <el-row class="item" id="scenic" style="width: 100%;height: 200px;display: flex;align-items: center;"
                v-if="item.searchVO.typeId == 3">
                <div class="img" style="width: 15%;">
                    <el-image :src="item.searchVO.imgUrl" style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="content2" style="width: 45%;height: 100%;">
                    <div style="display: flex;">
                        <h3>{{ item.searchVO.title }}</h3>
                        <el-tag size="mini" type="success"
                            style="text-align: center; width: 40px;font-size: 10px;font-family: Arial">景区</el-tag>
                    </div>
                    <div class="start">
                        <span>星级：</span>
                        <span style="margin-right: 30px;">
                            <el-rate v-model="item.searchVO.hotelStar" style="display: inline-block;" disabled
                                show-score text-color="#ff9900" score-template="{value}">
                            </el-rate>
                        </span>
                        <span>价格：</span><b style="color: red;">{{ item.searchVO.price }} ￥</b>
                    </div>
                    <div class="address">
                        <span>地址：</span><b>{{ item.searchVO.address }}</b>
                    </div>
                    <div class="openTime">
                        <span>时间：</span><b>{{ item.searchVO.openTime }}</b>
                    </div>
                    <div class="intro">
                        <span>简介：</span><span class="text-ellipsis">{{ item.searchVO.content }}</span>
                    </div>
                </div>
                <div>
                    <el-button size="medium" type="success" @click="spotDetail(item.searchVO.id)">查看详情</el-button>
                </div>
            </el-row>
            <!-- 保险 -->
            <el-row class="item" style="width: 100%;height: 200px;display: flex;align-items: center;"
                v-if="item.searchVO.typeId == 4">
                <div class="img" style="width: 15%;">
                    <el-image :src="item.searchVO.imgUrl" style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="content2" style="width: 43%;height: 100%;">
                    <div style="display: flex;">
                        <h3>{{ item.searchVO.title }}</h3>
                        <el-tag size="mini" type="danger"
                            style="text-align: center; width: 40px;font-size: 10px;font-family: Arial">保险</el-tag>
                    </div>
                    <div class="price">
                        <span>价格：</span><b style="color: red;">{{ item.searchVO.price }}￥</b>
                    </div>
                    <div class="conpany">
                        <span>保险公司：</span>
                        <span v-if="item.searchVO.insuranceCompany == 0">人寿保险</span>
                        <span v-else-if="item.searchVO.insuranceCompany == 1">健康平安</span>
                        <span v-else-if="item.searchVO.insuranceCompany == 2">天天飘保险</span>
                        <span v-else>一生无忧</span>
                    </div>
                    <div class="type">
                        <span>保险类型：</span>
                        <span v-if="item.searchVO.insuranceType == 0">全身险</span>
                        <span v-else-if="item.searchVO.insuranceType == 1">酒店保险</span>
                        <span v-else-if="item.searchVO.insuranceType == 2">景区保险</span>
                        <span v-else-if="item.searchVO.insuranceType == 3">出行保险</span>
                        <span v-else>路线保险</span>
                    </div>
                    <div class="intro">
                        <span>简介：</span><span class="text-ellipsis">{{ item.searchVO.content }}</span>
                    </div>
                </div>
                <div>
                    <el-button size="medium" type="success" @click="insurancetDetail(item.searchVO.id)">查看详情</el-button>
                </div>
            </el-row>
            <!-- 攻略 -->
            <el-row class="item" style="width: 100%;height: 200px;display: flex;align-items: center;"
                v-if="item.searchVO.typeId == 5">
                <div class="img" style="width: 15%;">
                    <el-image :src="item.searchVO.imgUrl" style="width: 150px; height: 150px;"></el-image>
                </div>
                <div class="content2" style="width: 43%;height: 100%;">
                    <div style="display: flex;">
                        <h3>{{ item.searchVO.title }}</h3>
                        <el-tag size="mini" type="warning"
                            style="text-align: center; width: 40px;font-size: 10px;font-family: Arial">攻略</el-tag>
                    </div>
                    <div class="user">
                        <span>发表用户：</span>
                        <el-image :src="item.searchVO.userUrl" style=" width:40px;
                        height: 40px;
                        vertical-align: middle;
                        border-radius: 100px;"></el-image>
                        <b style="font-size: 25px;margin-left: 10px;color: #409EFF;">{{ item.searchVO.userName }}</b>
                    </div>
                    <div>
                        <span style="margin: 0 5px;">
                            <img style=" width: 25px;height: 25px;vertical-align: middle;"
                                src="../assets/images/dz.png" />
                            {{ item.searchVO.liked }}
                        </span>
                        <span style="margin: 0 5px;">
                            <img style=" width: 25px; height: 25px; vertical-align: middle;"
                                src="../assets/images/sc.png" />
                            {{ item.searchVO.collects }}
                        </span>
                    </div>
                    <div>
                        <span>发表时间：</span><b style="font-size: 13px;color: #909399;">{{ item.searchVO.addTime |
                            formatDateTime }}</b>
                    </div>
                </div>
                <div>
                    <el-button size="medium" type="success" @click="strategyDetail(item.searchVO.id)">查看详情</el-button>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
import newAxios from "../utils/axios";
export default {
    name: "searchResult",
    data() {
        return {
            searchResultList: [],
            searchCount:0,
        };
    },
    created() {
        console.log("路由：" + this.$route.query.keyWord);
        this.getSearchData(this.$route.query.keyWord);
    },
    filters: {
        formatDate: function (value) {
            if (!value) return '';
            const date = new Date(value);
            return date.toISOString().split('T')[0];
        },
        formatDateTime: function (value) {
            if (!value) return '';
            const date = new Date(value);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
    },
    methods: {
        carDetail(id) {
            this.$router.push({
                path: "/carDetail",
                query: {
                    car_id: id,
                },
            });
        },
        routeDetail(id) {
            this.$router.push({
                path: "/routeDetail",
                query: {
                    routeId: id,
                },
            });
        },
        hotelDetail(id, scenicSpotId) {
            this.$router.push({
                path: "/hotel_detail",
                query: {
                    scenicSpotId: scenicSpotId,
                    hotelid: id,
                },
            });
        },
        spotDetail(id) {
            this.$router.push({
                path: "/scenicDetail",
                query: {
                    spotId: id,
                },
            });
        },
        insurancetDetail(id) {
            this.$router.push({
                path: "/insuranceDetail",
                query: {
                    insuranceId: id,
                },
            });
        },
        strategyDetail(id) {
            this.$router.push({
                path: "/strategyDetail",
                query: {
                    strategyId: id,
                },
            });
        },
        getSearchData(keyWord) {
            newAxios
                .post("/search/all", {
                    searchContent: keyWord
                })
                .then((res) => res.data)
                .then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        console.log("1111:", res.data);
                        this.searchResultList = res.data
                        this.searchCount = this.searchResultList.length;
                    } else {
                        this.$message.error("请先登陆喔！");
                    }
                });

        },
        back() {
            this.$router.back();
        },
    }
}
</script>

<style>
h3 {
    margin: 0;
}

.box .left {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 50px;
}

.box .left .content {
    font-family: "STXinwei";
}

.box .left .content div {
    margin: 10px 0;
}

.item {
    margin: 0;
    border-bottom: 1px solid #f5f2f2;
}

.item .img {
    padding-left: 50px;
}

.item .content2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "STXinwei";
    margin-left: 20px;


}

.item .content2 h3 {
    color: #67C23A;
    font-size: 22px;
    margin-right: 20px;
}

.item .content2 div {
    margin: 5px 0;
}

#scenic .content2 div {
    margin: 5px 0;
}

.item .content .intro .text-ellipsis {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-indent: 2em;
}
</style>